<template>
  <div id="score">
    <div style="margin-bottom: 10px;">
      <el-button type="success" @click="newQuestion">新增评分题</el-button>
    </div>
    <div>
      <Question
        :idx="idx"
        :key="question.id"
        :value="question"
        @down="positionDown"
        @input="change"
        v-for="(question, idx) in scoreData"
        @up="positionUp"
        @edit-question="editQuestion"
        @delete-question="deleteQuestion"></Question>
    </div>
    <div> <!-- 新增评分题的弹出对话框 -->
      <el-dialog :title="newScore" :visible.sync="showNew">
        <div>
          <el-row class="row">
            <el-col :span="6">
              <div style="text-align: right; margin-right: 10px;">
                <span>题目<span style="color: red;">*</span></span>
              </div>
            </el-col>
            <el-col :span="18">
              <div>
                <KindEditor :content.sync="newTitleName" editor-type="Input"></KindEditor>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="6">
              <div style="text-align: right; margin-right: 10px;">
                <span>题目类型<span style="color: red;">*</span></span>
              </div>
            </el-col>
            <el-col :span="18">
              <el-radio-group v-model="multiple">
                <el-radio :label="false">单选</el-radio>
                <el-radio :label="true">多选</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <div style="text-align: right">
                <div class="inline-block">
                  <el-button @click="cancelNew">取 消</el-button>
                </div>
                <div class="inline-block">
                  <el-button @click="confirmNew('edit')" type="success">确 定</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Question from "./Question";

  export default {
    name: "ScoreSection",
    components: {
      Question
    },
    props: ["value"],
    data() {
      return {
        scoreData: [],
        showNew: false,
        newTitleName: "",
        multiple: false,
        newTitleId: '',
        status: '',
        newScore: '新增评分题'
      }
    },
    methods: {
      change() {
        this.$emit("input", this.scoreData)
      },
      positionUp(idx) {
        if (idx > 0) {
          // 修改对象在数组中的位置
          let tempQuestion = {}
          tempQuestion.name = this.scoreData[idx].name
          tempQuestion.multiple = this.scoreData[idx].multiple
          tempQuestion.items = this.scoreData[idx].items
          this.scoreData[idx].name = this.scoreData[idx - 1].name
          this.scoreData[idx].multiple = this.scoreData[idx - 1].multiple
          this.scoreData[idx].items = this.scoreData[idx - 1].items
          this.scoreData[idx - 1].name = tempQuestion.name
          this.scoreData[idx - 1].multiple = tempQuestion.multiple
          this.scoreData[idx - 1].items = tempQuestion.items

          this.change()
        }
      },
      positionDown(idx) {
        if (idx < this.scoreData.length - 1) {
          // 修改对象在数组中的位置
          let tempQuestion = {}
          tempQuestion.name = this.scoreData[idx].name
          tempQuestion.multiple = this.scoreData[idx].multiple
          tempQuestion.items = this.scoreData[idx].items
          this.scoreData[idx].name = this.scoreData[idx + 1].name
          this.scoreData[idx].multiple = this.scoreData[idx + 1].multiple
          this.scoreData[idx].items = this.scoreData[idx + 1].items
          this.scoreData[idx + 1].name = tempQuestion.name
          this.scoreData[idx + 1].multiple = tempQuestion.multiple
          this.scoreData[idx + 1].items = tempQuestion.items

          this.change()
        }
      },
      newQuestion() {
        this.newTitleName = ""
        this.multiple = false
        this.showNew = true
      },
      cancelNew() {
        this.showNew = false
      },
      confirmNew(status) {

        if (this.status == status) {
          for (let i = 0; i < this.scoreData.length; i++) {
            if (this.scoreData[i].id == this.newTitleId) {
              this.scoreData[i].name = this.newTitleName,
                this.scoreData[i].multiple = this.multiple
            }
          }
        } else {
          let cntId = this.scoreData.length > 0 ? parseInt(this.scoreData[this.scoreData.length - 1].id) + 1 : 0
          this.scoreData.push({
            id: cntId,
            name: this.newTitleName,
            multiple: this.multiple,
            items: [{
              id: 0,
              score: 0,
              describe: ""
            }]
          })
        }
        this.newScore = '新增评分题'
        this.status = ''
        this.showNew = false
        this.change()
      },
      editQuestion(question) {
        this.newTitleId = question.id
        this.newTitleName = question.name
        this.multiple = question.multiple
        this.status = 'edit'
        this.newScore = '编辑评分题'
        this.showNew = true
      },
      deleteQuestion(idx) {
        this.scoreData.splice(idx, 1)
        this.change()
      }
    },
    mounted() {
      this.scoreData = this.value
    }
  }
</script>

<style scoped>
  .inline-block {
    display: inline-block;
  }

  .row {
    margin-bottom: 10px;
  }
</style>
